<script setup>
const props = defineProps({
  num: Number,
  color: String
})
</script>

<template>
  <div class="relative flex justify-center items-center"
       :style="{ '--bg-color': color,}">
    <div class="t-num">{{ num }}</div>
    <div class="absolute t-bg"></div>
  </div>
</template>

<style scoped>
.t-bg {
  width: 36px;
  height: 10px;
  background: linear-gradient(90deg, rgba(255, 193, 6, 0) 10%, var(--bg-color) 50%, rgba(255, 193, 6, 0) 88%);
  border-radius: 0px 0px 0px 0px;
}

.t-num {
  width: 9px;
  height: 22px;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 21px;
  font-style: normal;
  text-transform: none;
  z-index: 9999;
}
</style>
